<template>
  <el-form class="filter-form-inline" label-position="right" label-width="140px" size="small">
    <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
      <el-col :lg="12" :xs="12">
        <el-form-item label="商销客户名称：">
          <span>{{ formData?.sellerName }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :xs="12">
        <el-form-item label="企业所在地区：">
          <span >{{ formData?.provinceName }}/{{ formData?.cityName}}/{{ formData?.areaName}}</span>
        </el-form-item>
      </el-col>

      <el-col :lg="12" :xs="12">
        <el-form-item label="详细地址：">
          <span>{{ formData?.address }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :xs="12">
        <el-form-item label="统一社会信用代码：">
          <span>{{ formData?.creditCode }}</span>
        </el-form-item>
      </el-col>

      <el-col :lg="12" :xs="12">
        <el-form-item label="联系人：">
          <span>{{ formData?.userName }}</span>
        </el-form-item>
      </el-col>
      <el-col :lg="12" :xs="12">
        <el-form-item label="联系电话：">
          <span>{{ formData?.tel }}</span>
        </el-form-item>
      </el-col>

    </el-row>
  </el-form>
</template>

<script>
import {
  getCurrentInstance,
  defineAsyncComponent,
  inject,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const api = inject("api");
    const data = reactive({
      formData: {},
    });

    const handleDratails = (id) => {
      api.editorial.EDITORIAL_SHANGPIN_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.reAgent;
        }
      });
    };

    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          handleDratails(newval);
        }
      }
    );

    onMounted(() => {
      handleDratails(props.id);
    });
    return {
      ...toRefs(data),
      handleDratails
    };
  },
};
</script>

<style lang="scss" scoped>
</style>